import * as React from 'react';
import {
  createBottomTabNavigator,
  BottomTabBarProps,
} from '@react-navigation/bottom-tabs';
import {HomeOutline} from '@fruits-chain/icons-react-native';
import {TransitionPresets} from '@react-navigation/stack';
import {Text, View, StyleSheet, TouchableOpacity} from 'react-native';
import {activeColor} from '../../common/color';
import {p} from '../../utils/pxToDp';

import User from '../user';
import Home from '../home';

const Tab = createBottomTabNavigator();

const renderTabbar = (props: BottomTabBarProps) => {
  const {navigation} = props;
  const {routes, index} = props.state;
  const style = StyleSheet.create({
    tabContent: {
      paddingBottom: p(12),
      flexDirection: 'row',
    },
    itemLayout: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      height: p(80),
    },
    text: {
      marginTop: p(2),
      fontSize: p(12),
    },
  });

  return (
    <View style={style.tabContent}>
      {routes.map((item, i) => (
        <TouchableOpacity
          style={style.itemLayout}
          key={item.key}
          onPress={() => {
            navigation.navigate(item.name);
          }}>
          <HomeOutline
            pointerEvents="none"
            size={p(24)}
            color={index === i ? activeColor : '#999'}
          />
          <Text
            style={[style.text, {color: index === i ? activeColor : '#999'}]}>
            {item.name}
          </Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

export default () => {
  return (
    <Tab.Navigator tabBar={props => renderTabbar(props)}>
      <Tab.Screen name="Home" component={Home} options={{headerShown: false}} />
      <Tab.Screen name="User" component={User} options={{headerShown: false}} />
    </Tab.Navigator>
  );
};
